import React, { CSSProperties } from 'react'
import { Button, Result } from 'antd'
import { useNavigate } from 'react-router'
import { ResultStatusType } from 'antd/es/result'

import styles from './index.module.less'

type Props = {
  status?: ResultStatusType | undefined
  icon?: React.ReactNode | undefined
  title?: string | undefined
  subTitle?: string | undefined
  extra?: React.ReactNode | string
  showNavToHome?: boolean
  styles?: CSSProperties
}

export default function PageNotFound(props: Props) {
  const {
    status,
    icon,
    title,
    subTitle,
    extra,
    styles: cssStyles,
    showNavToHome = false
  } = props
  const navigate = useNavigate()

  const navToHomeDom = (
    <Button type="primary" onClick={() => navigate('/')}>
      回到首页
    </Button>
  )

  const renderExtra = extra ? extra : showNavToHome ? navToHomeDom : undefined

  return (
    <Result
      style={cssStyles}
      className={styles.wrapper}
      status={status}
      icon={icon}
      title={title}
      subTitle={subTitle}
      extra={renderExtra}
    />
  )
}
